<template>
  <div style="width:100%;height:100%;">
    <div class="model4Title">
      <div class="title">
        未处理缺陷分布
        <span v-if="data.length">
          （维修建议：{{ current == 0 ? '累计' : current == 1 ? '近一年' : current == 2 ? '近三月' : current == 3 ? '近一月' : '' }}“{{
            order ? data[0] : data[data.length - 1]
          }}”发生缺陷次数较多，请重点关注）
        </span>
      </div>
      <div>
        <div class="dialogTabs">
          <div />
          <div style="display: flex">
            <el-select
              v-model="value"
              :popper-append-to-body="false"
              popper-class="select"
              placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value" />
            </el-select>
            <div
              v-for="(item, index) in tabs"
              :key="index"
              class="dialogtabLis"
              :class="current == index ? 'dialogTabsAction' : ''"
              @click="current = index">{{ item }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="sort">
      <div />
      <div style="cursor: pointer;" @click="order = !order">
        <img src="@/assets/images/sort.png" alt>
        {{ order ? '从低到高排序' : '从高到低排序' }}
      </div>
    </div>
    <div id="model4Content" class="model4Content" />
  </div>
</template>
<script>
import { getUntreatedDefect, getDeptByTypeCode } from '@/api/cms/index/index.js'
import echarts from 'echarts'
export default {
  props: {

    railTypes: {
      type: String,
      default: ''
    },
    deptCode: {
      type: String,
      default: ''
    },
    deptId: {
      type: String,
      default: ''
    }

  },
  data() {
    return {
      value: 'dept',
      tabs: ['累计', '近一年', '近三月', '近一月'],
      current: 0,
      options: [
        {
          label: '部门',
          value: 'dept'
        },
        {
          label: '区站',
          value: 'site'
        }
      ],
      data: [],
      showEchart: false,
      order: true
    }
  },
  computed: {
    type() {
      return this.current === 0 ? null : this.current === 1 ? 12 : this.current === 2 ? 3 : this.current === 3 ? 1 : ''
    }
  },
  watch: {
    current() {
      this.init()
    },
    order() {
      this.init()
    },
    value() {
      this.init()
    },
    deptId() {
      this.init()
    },
    railTypes() {
      this.init()
    },
    deptCode() {
      this.init()
    }
  },
  mounted() {
    this.init()
  },
  methods: {

    init() {
      getUntreatedDefect({
        monthNum: this.type,
        findType: this.value,
        order: this.order ? 'desc' : 'asc',
        deptId: this.deptId,
        deptCode: this.deptCode,
        railTypeList: this.railTypes.split(',')
      }).then(res => {
        const myChart3 = echarts.init(document.getElementById('model4Content'))
        this.data = res.data.xData
        const xAxisDatas = []
        this.data.forEach(element => {
          if (element.length > 4) { // 字符串超过10个字符时换行
            var strArr = [] // 定义一个空数组
            var n = 4
            for (var i = 0, l = element.length; i < l / n; i++) {
              var a = element.slice(0, n)
              var b = element.slice(n, l)
            }
            // 将分开的字符串分别放进数组
            strArr.push(a)
            strArr.push(b)
            element = a + '\n' + b // 支付宝小程序换行符为\n
          }
          xAxisDatas.push(element)
        })
        var namenum = Math.floor(100 / (this.data.length / 10))
        if (this.data.length > 6) {
          this.showEchart = true
        } else {
          this.showEchart = false
        }
        const optons = {
          tooltip: {
            trigger: 'item'
          },
          xAxis: {
            type: 'category',
            data: xAxisDatas,
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff' // 这里用参数代替了
              }
            },
            axisLine: {
              lineStyle: {
                color: '#2C50B4',
                width: 1// 这里是为了突出显示加上的
              }
            }
          },
          grid: {
            top: '5%',
            left: '3%',
            right: '3%',
            bottom: '35%'
          },
          yAxis: {
            type: 'value',
            'splitLine': { // 网格线
              'show': false
            },

            axisLabel: {
              show: true,
              interval: 0,
              textStyle: {
                color: '#fff' // 这里用参数代替了
              }
            },
            axisLine: {
              lineStyle: {
                color: '#2C50B4',
                width: 1// 这里是为了突出显示加上的
              }
            }
          },
          dataZoom: [{
            show: this.showEchart,
            xAxisIndex: [0],
            start: 0,
            height: 26,
            left: 100,
            right: 100,
            bottom: 0,
            end: namenum,
            handleSize: '110%',
            zoomLock: true,
            textStyle: {
              color: '#fff' // 这里用参数代替了
            }
          }],
          series: [
            {
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0,
                    1,
                    0,
                    0,
                    [
                      {
                        offset: 0,
                        color: '#1254FF' // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: '#12F1FF' // 100% 处的颜色
                      }
                    ],
                    false
                  )
                }
              },
              barWidth: 20,
              data: res.data.data,
              type: 'bar'
            }
          ]
        }
        myChart3.setOption(optons)
      })
    }
  }
}
</script>
<style  scoped>
.model4Title {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  padding-bottom: 0;
}
.model4Title .title {
  font-weight: 500;
  font-size: 16px;
  color: #fff;
}
.model4Title .title span {
  font-size: 14px;

  color: #c0796a;
}
.dialogTabs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 36px;
}
.dialogTabsAction {
  background: #0a2b52 !important;
  border: 1px solid #66ffff !important;
  box-sizing: border-box;
  color: rgba(102, 255, 255, 1) !important;
}
.dialogtabLis {
  padding: 0 12px;
  height: 36px;
  background: #0f1f56;
  border: 1px solid rgba(84, 113, 255, 0.6);
  line-height: 36px;
  text-align: center;
  font-weight: 350;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
}
/deep/.el-select {
  width: 150px;
  margin-right: 20px;
}
/deep/.el-select-dropdown__list {
  border: 1px solid rgba(102, 255, 255, 0.15);
}
/deep/.el-select-dropdown__item.selected.hover {
  color: rgba(102, 255, 255, 1) !important;
}
/deep/ .el-select-dropdown__item {
  color: #fff;
}
/deep/.el-select-dropdown__item.hover,
/deep/.el-select-dropdown__item:hover {
  background: rgba(102, 255, 255, 0.1) !important;
  color: #fff !important;
}
/deep/.el-select-dropdown {
  background-color: #0f1f56 !important;
  border: 0;
}
/deep/.el-popper[x-placement^="bottom"] .popper__arrow {
  display: none;
}
/deep/.el-input__inner {
  background: #0f1f56;
  color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(84, 113, 255, 0.6);
  box-sizing: border-box;
  border-radius: 2px;
}
/deep/.el-popper[x-placement^="top"] .popper__arrow {
  display: none;
}
.sort {
  display: flex;
  padding: 0 20px;
  justify-content: space-between;
  height: 30px;
  line-height: 30px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}
.model4Content {
  height: calc(100% - 86px);
}
</style>
